<template>
	<div>
		<div
			:class="`condition ${
				dataSource.conditions && dataSource.conditions.length >= 2 ? 'has-logic' : ''
			}`"
			v-if="dataSource.conditions"
		>
			<div class="condition-item" v-for="(obj, pkey) in dataSource.conditions" :key="pkey">
				<template v-if="!obj.conditions">
					<Conditions
						class="btn"
						:level="'parent'"
						:item="obj"
						:pkey="pkey"
						:projectId="projectId"
						:eventCode="eventCode"
						@changeConditionAttr="handleConditionAttr"
					/>
					<ConditionFunction
						class="btn"
						:level="'parent'"
						:item="obj"
						:pkey="pkey"
						:dataType="dataType"
						@changeAttrFunction="handleAttrFunction"
					/>
					<ConditionValue
						:item="obj"
						:projectId="projectId"
						:attrCode="attrCode"
						:attrType="attrType"
						:dataType="dataType"
						:functionCode="functionCode"
						@changeSelectValue="handleSelectValue"
						@changeInputValue="handleInputValue"
					/>
					<ConditionOperation
						class="icon"
						:item="obj"
						:pkey="pkey"
						:level="'parent'"
						:pSum="dataSource.conditions.length"
						@addSubCondition="handleSubCondition"
						@DelCondition="handleDelCondition"
					/>
				</template>

				<template v-else>
					<div :class="`sub-children ${obj.conditions.length >= 2 ? 'has-logic' : ''}`">
						<div class="condition-item" v-for="(o, skey) in obj.conditions" :key="o.render_index">
							<Conditions
								class="btn"
								:level="'sub'"
								:item="o"
								:pkey="pkey"
								:subkey="skey"
								:projectId="projectId"
								:eventCode="eventCode"
								@changeConditionAttr="handleConditionAttr"
							/>
							<ConditionFunction
								class="btn"
								:item="o"
								:level="'sub'"
								:pkey="pkey"
								:subkey="skey"
								:dataType="dataType"
								@changeAttrFunction="handleAttrFunction"
							/>
							<ConditionValue
								:item="o"
								:projectId="projectId"
								:attrCode="attrCode"
								:attrType="attrType"
								:dataType="dataType"
								:functionCode="functionCode"
							/>
							<ConditionOperation
								class="icon"
								:level="'sub'"
								:item="obj"
								:pkey="pkey"
								:subkey="skey"
								:sum="obj.conditions.length"
								@addSubCondition="handleSubCondition"
								@DelCondition="handleDelCondition"
							/>
						</div>

						<span class="sub logic" v-if="obj.conditions.length >= 2">
							<em
								:class="`${obj.relation === 'and' ? 'current' : ''}`"
								@click="changeLogic('and', pkey, subkey)"
							>
								且
							</em>
							<em
								:class="`${obj.relation === 'or' ? 'current' : ''}`"
								@click="changeLogic('or', pkey, subkey)"
							>
								或
							</em>
						</span>
					</div>
				</template>
			</div>

			<span class="logic" v-if="dataSource.conditions.length >= 2">
				<em
					:class="`${dataSource.relation === 'and' ? 'current' : ''}`"
					@click="changeLogic('and', pkey, '')"
				>
					且
				</em>
				<em
					:class="`${dataSource.relation === 'or' ? 'current' : ''}`"
					@click="changeLogic('or', pkey, '')"
				>
					或
				</em>
			</span>
		</div>
		<div class="add-icon">
			<span @click="handleAddCondition">
				<a-icon type="plus-circle" class="iconfont" />
				全局筛选
			</span>
		</div>
	</div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import {
	Conditions,
	ConditionFunction,
	ConditionOperation,
	ConditionValue,
	CustomFilter
} from '@/components/screen/components/index'
import { defaultIindicators, defaultCondition } from '@/components/screen/data/defaultValue'
import '../style/style.scss'
import _ from 'lodash'

@Component({
	name: 'GlobalScreen',
	components: {
		Conditions,
		ConditionFunction,
		ConditionOperation,
		ConditionValue,
		CustomFilter
	}
})
export default class extends Vue {
	@Prop() defaultData!: any
	@Prop() eventCode!: string
	@Prop() projectId!: number

	private dataSource: any = this.defaultData
	private sum = this.dataSource.conditions.length
	private addDefaultIindicators = defaultIindicators
	private addDefaultCondition = defaultCondition

	private dataType: string = this.addDefaultCondition.attr.dataType
	private attrCode: string = this.addDefaultCondition.attr.attrCode
	private attrType: string = this.addDefaultCondition.attr.attrType
	private functionCode: string = this.addDefaultCondition.functionCode

	// 增加筛选：完
	private handleAddCondition() {
		this.dataSource = _.cloneDeep(this.dataSource)
		const length = this.dataSource.conditions.length
		let newCondition = {
			renderIndex: length,
			...this.addDefaultCondition
		}

		this.dataSource.relation = length >= 1 ? 'and' : ''
		this.dataSource.conditions.push(newCondition)
	}
	// &操作
	private handleSubCondition(params: any) {
		const { level, pkey, item } = params //item
		if (level === 'sub') {
			const target = this.dataSource.conditions[pkey].conditions
			const data = _.cloneDeep(this.dataSource)
			const newCondition = {
				render_index: target.length,
				...this.addDefaultCondition
			}

			data.conditions[pkey].conditions.push(newCondition)
			this.dataSource = _.cloneDeep(data)
		} else {
			const newItem = _.cloneDeep(item)
			delete newItem.renderIndex
			// 组合新增条件
			let newCondition = {
				relation: 'and',
				render_index: pkey,
				conditions: [
					{
						render_index: 0,
						...newItem
					},
					{
						render_index: 1,
						...this.addDefaultCondition
					}
				]
			}

			this.$set(this.dataSource.conditions, pkey, newCondition)
		}
	}
	// 删除条件
	private handleDelCondition(params: any) {
		const { level, pkey, subkey, item } = params
		let result
		let target
		if (level === 'sub') {
			target = this.dataSource.conditions[pkey].conditions
			let filterResult = target.filter((obj: any) => {
				return obj.render_index !== item.conditions[subkey].render_index
			})
			if (filterResult.length <= 1) {
				const single = _.cloneDeep(filterResult)
				delete single[0].render_index
				result = {
					render_index: `${subkey}`,
					...single[0]
				}
				let data = _.cloneDeep(this.dataSource)
				data.conditions[pkey] = result
				this.dataSource = _.cloneDeep(data)
			} else {
				result = filterResult
				const data = _.cloneDeep(this.dataSource)
				data.conditions[pkey].conditions = result
				this.dataSource = _.cloneDeep(data)
			}
		} else {
			target = this.dataSource.conditions
			let filterResult = target.filter((obj: any) => {
				return obj.render_index !== item.render_index
			})

			if (filterResult.length == 1 && filterResult[0].conditions) {
				const single = _.cloneDeep(filterResult)
				result = {
					relation: single[0].relation,
					conditions: [...single[0].conditions]
				}
				let data = _.cloneDeep(this.dataSource)

				data = result
				this.dataSource = _.cloneDeep(data)
			} else {
				result = filterResult
				const data = _.cloneDeep(this.dataSource)
				data.filter.conditions = result
				this.dataSource = _.cloneDeep(data)
			}
		}
	}
	// 切换条件
	private handleConditionAttr(params: any) {
		const { e, type, level, pkey, subkey } = params
		this.attrType = type
		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].attr = {
				attrType: type,
				dataType: e.item.role,
				attrCode: e.item.value,
				attrName: e.item.title
			}
			this.dataSource = _.cloneDeep(data)
			this.attrCode = e.item.value
			this.dataType = e.item.role
		} else {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].conditions[subkey].attr = {
				attrType: type,
				dataType: e.item.role,
				attrCode: e.item.value,
				attrName: e.item.title
			}
			this.dataSource = _.cloneDeep(data)
			this.attrCode = e.item.value
			this.dataType = e.item.role
		}
	}
	// 条件值
	private handleSelectValue(params: any) {
		const { value, level, pkey, subkey } = params
		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].params = value
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].conditions[subkey].params = value
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 条件区间值
	private handleInputValue(params: any) {
		const { value, level, pkey, subkey } = params
		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].params = value
			this.dataSource = _.cloneDeep(data)
		} else {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].conditions[subkey].params = value
			this.dataSource = _.cloneDeep(data)
		}
	}
	// 切换条件function
	private handleAttrFunction(params: any) {
		const { e, level, pkey, subkey } = params
		if (level === 'parent') {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].functionCode = e.item.value
			data.conditions[pkey].functionAlias = e.item.title
			this.dataSource = _.cloneDeep(data)
			this.functionCode = e.item.value
		} else {
			const data = _.cloneDeep(this.dataSource)
			data.conditions[pkey].conditions[subkey].functionCode = e.item.value
			data.conditions[pkey].conditions[subkey].functionAlias = e.item.title
			this.dataSource = _.cloneDeep(data)
			this.functionCode = e.item.value
		}
	}
	private handleConditionValue(params: any) {
		console.log(params)
	}

	@Watch('dataSource')
	private ChangedGlobalData() {
		console.log('this.dataSource: ', this.dataSource)
		this.$emit('ChangedGlobalData', this.dataSource)
	}
}
</script>
<style lang="scss" scoped></style>
